<template lang="pug">
  el-drawer.commonDrawer(
    title="添加食谱"
    :visible="visibleDialog"
    append-to-body
    direction="rtl"
    size="520px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" round  :loading="submitting" @click="submitHandle") 确定
</template>
<script>
import { mapGetters } from 'vuex'
import { briefSubmit } from '../api'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitting: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      return [
        {
          key: 'title',
          rules: [{ required: true, message: '请输入' }],
          label: '食谱名称'
        },
        {
          key: 'date',
          rules: [{ required: true, message: '请输入' }],
          type: 'daterange',
          key1: 'beginAt',
          key2: 'endAt',
          formatFlag: true,
          label: '时间段'
        },
        {
          key: 'file',
          rules: [{ required: true, message: '请输入' }],
          type: 'upload',
          label: '食谱图片',
          fieldProps: {
            // listType: 'picture-card',
            imgFlag: true,
            limit: 1,
            accept: 'image/*',
            actionUrl: '#',
            autoUpload: false,
            'show-file-list': false
          }
        }
      ]
    }
  },
  methods: {
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      this.submitting = true
      const { file, ...rest } = values

      const param = new FormData()
      param.append('file', file[0].raw)
      param.append('beginAt', rest.beginAt)
      param.append('endAt', rest.endAt)
      param.append('title', rest.title)

      briefSubmit(param).then(() => {
        this.$message.success('添加食谱成功')
        this.$refs.form.resetForm()
        this.$emit('getList', {})
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
